<!--
 * @Description: 多列选择器
 * @Author: Lxc
 * @Date: 2021-09-14 11:38:15
 * @LastEditors: Lxc
 * @LastEditTime: 2021-09-15 17:41:54
-->
<template>
  <view>
    <view class="select-name">
      <view class="select-name-item" @click="selectHandle(1)">
        <text v-if="leftList.length > 1"
          >{{ leftList[0].name }}-{{ leftList[1].name }}-{{
            leftList[2].name
          }}</text
        >
        <text v-else-if="leftList.length == 1">{{ leftList[0].name }}</text>
        <uni-icons type="arrowdown" color="rgba(255, 255, 255, 0.8)" />
      </view>
      <view class="select-name select-name-item">
        <view class="middle-line" v-if="rightTitle != ''" />
        <view
          class="select-name-item"
          @click="selectHandle(2)"
          v-if="rightTitle != ''"
        >
          {{ rightTitle }}
          <uni-icons type="arrowdown" color="rgba(255, 255, 255, 0.8)" />
        </view>
      </view>
    </view>
    <uni-popup
      id="selectPopup"
      ref="selectPopup"
      type="bottom"
      :animation="false"
      background-color="#FFF"
      @change="change"
    >
      <view class="select-header-title" v-if="popupConfig">
        <image
          :style="[
            { width: popupConfig.width },
            { height: popupConfig.height },
          ]"
          :src="popupConfig.img"
          alt=""
        />
        <text>{{ popupConfig.label }}</text>
      </view>
      <view class="select-tab-wrap">
        <view
          v-for="(item, index) in selectList"
          :key="item.value"
          :class="[index == activeId ? 'active-item' : '', 'select-tab-item']"
          @click="selectTab(item, index)"
          >{{ item.name }}</view
        >
      </view>
      <scroll-view
        :scroll-top="scrollTop"
        scroll-y="true"
        class="scroll-Y"
        @scrolltoupper="upper"
        @scrolltolower="lower"
        @scroll="scroll"
      >
        <radio-group @change="radioChange">
          <label
            v-for="(item, index) in selectData"
            :key="item.value"
            class="select-list-item"
          >
            <text>{{ item.name }}</text>
            <radio
              :value="item.value"
              :checked="index == current"
              color="#027AFF"
            />
          </label>
        </radio-group>
      </scroll-view>
      <view class="select-btn">
        <button type="primary" @click="submit">确定</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  props: {
    activeId: Number,
    leftList: Array,
    rightTitle: String,
    popupConfig: Object,
    selectList: Array,
    selectData: Array,
  },
  data() {
    return {
      scrollTop: 0,
      old: {
        scrollTop: 0,
      },
      current: -1,
      sortList: [], // 存储tab的选择
    };
  },

  methods: {
    selectHandle(val) {
      this.$refs.selectPopup.open();
      this.$emit("selectHandle", val);
    },
    /**
     * popup 状态发生变化触发
     * @param {Object} e
     */
    change(e) {
      console.log("popup " + e.type + " 状态", e.show);
    },
    upper: function(e) {
      console.log(e);
    },
    lower: function(e) {
      console.log(e);
    },
    scroll: function(e) {
      console.log(e);
      this.old.scrollTop = e.detail.scrollTop;
    },
    // tab选择
    selectTab(val, index) {
      console.log("index", index);
      this.current = -1;
      this.$emit("selectTab", val, index);
      this.sortList.push(this.selectList[index - 1].name);
    },
    // 单选
    radioChange(evt) {
      this.$emit("radioChange", evt.detail.value);
    },
    // 确定按钮
    submit() {
      this.sortList.push(this.selectList[this.selectList.length - 1].name);
      this.$emit("submit", this.sortList, this.selectList);
      this.$refs.selectPopup.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.select-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 96rpx;
  background: #027aff;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  .select-name-item {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .middle-line {
    width: 1rpx;
    height: 60rpx;
    background: rgba(255, 255, 255, 0.8);
  }
  .left-title:last-child {
    .short-line {
      display: none;
    }
  }
}
.select-popup {
  border-radius: 16rpx, 16rpx, 0, 0;
}
.select-header-title {
  display: flex;
  align-items: center;
  height: 96rpx;
  padding-left: 32rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #2b2b2b;
  > image {
    margin-right: 12.6rpx;
  }
}
.select-tab-wrap {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 80rpx;
  margin-bottom: 16rpx;
  line-height: 80rpx;
  font-weight: normal;
  font-size: 28rpx;
  // box-shadow: 0 3rpx 6rpx rgba(44, 121, 247, 0.2);
  // border-radius: 0, 0, 16rpx, 16rpx;
  .select-tab-item {
    color: #5c5e66;
    border-bottom: 4rpx solid transparent;
  }
  .active-item {
    box-sizing: border-box;
    color: #027aff;
    border-bottom: 4rpx solid #027aff;
    border-radius: 1rpx;
  }
}
.select-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32rpx;
  line-height: 96rpx;
}
.select-btn {
  padding-bottom: 42rpx;
  button[type="primary"] {
    width: 686rpx;
    height: 96rpx;
    background: linear-gradient(#3294ff 0%, #027aff 100%);
    line-height: 96rpx;
  }
}
</style>
